<template>
  <div class="timeTable">
    <div class="header">
      <p style="margin-right: 30px"><strong>项目编号：</strong>{{ projectBuildData.projectNo }}</p>
      <p><strong>项目名称：</strong>{{ projectBuildData.projectName }}</p>
    </div>
    <div class="content">
      <div class="controller">
        <div v-show="btnShow">
          <a-button type="primary" @click="handleAddNode()">添加节点</a-button>
          <a-button type="primary" @click="openImportWin">导入节点</a-button>
          <a-button type="primary" @click="deleteSubTimeNode">删除节点</a-button>
          <a-button @click="moveUp">上移</a-button>
          <a-button @click="moveDown">下移</a-button>
          <a-button @click="upGrade">升级</a-button>
          <a-button @click="downGrade">降级</a-button>

          <a-button @click="openPic" v-show="projectBuildData.projectClass === '10'">产品平面设计周期表</a-button>
          <a-button @click="openEcTable" v-show="projectBuildData.projectTypeSubCategory === 'EC'" type="primary"><a-icon type="file-search" />时间表填写指引</a-button>
          <a-button  type="danger" @click="cycleRulesVisible=true" v-show="projectCycleRulesData.length>0">项目周期规则</a-button>
        </div>
        <div>
          <img src="@/assets/attention-red.png" alt="" style="width: 12px; margin-right: 5px" />
          <span style="font-size: 14px"
            >注：可以由项目经理制定新增节点报工人，没有制定报工人的，默认项目经理，副经理是报工人。【关键节点红色部分属于固定节点，不可修改】</span
          >
        </div>
        <div v-if="changeId && projectBuildData.projectClass === '60'">
          <img src="@/assets/attention-red.png" alt="" style="width: 12px; margin-right: 5px" />
          <span style="font-size: 14px;color:red;font-weight:bold;"
          >注：如果需要增加相应月份的报工，只需修改项目关键节点为【收益计算周期】的开始时间或者结束时间即可，无需自己增加时间节点！！！</span
          >
        </div>
      </div>
      <a-table
        :columns="timeColList"
        :data-source="timeListData"
        childrenColumnName="childrens"
        rowKey="timeNodeCode"
        :pagination="false"
        :indentSize="15"
        bordered
        :expandIcon="expandIcon"
        :defaultExpandAllRows="true"
        v-if="!loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: selectType }"
      >
        <template slot="timeNode" slot-scope="text, record">
            <span :class="{'color-red' : isCodeNode(record)} ">{{ record.timeNode }}</span>
        </template>
        <template slot="jobContent" slot-scope="text, record">
          <a-textarea :placeholder="getPlaceholder(record)" auto-size v-model="record.jobContent"  :class="{'color-red' : isCodeNode(record)} "/>
        </template>
        <template slot="planStartDate" slot-scope="text, record">
          <a-date-picker
            size="small"
            v-model="record.planStartDate"
            valueFormat="YYYY-MM-DD"
            @change="timeSelect(record)" 
            :class="{'color-red' : isCodeNode(record)} "
          />
        </template>
        <template slot="completionDate" slot-scope="text, record">
          <a-date-picker
            size="small"
            v-model="record.completionDate"
            valueFormat="YYYY-MM-DD"
            @change="timeSelect(record)"
            :class="{'color-red' : isCodeNode(record)} "
          />
        </template>
        <template slot="planStartDateAudit" slot-scope="text, record">
          <a-date-picker
            size="small"
            v-model="record.planStartDateAudit"
            valueFormat="YYYY-MM-DD"
            @change="timeSelect(record)"
            :class="{'color-red' : isCodeNode(record)} "
          />
        </template>
        <template slot="completionDateAudit" slot-scope="text, record">
          <a-date-picker
            size="small"
            v-model="record.completionDateAudit"
            valueFormat="YYYY-MM-DD"
            @change="timeSelect(record)"
            :class="{'color-red' : isCodeNode(record)} "
          />
        </template>
        <template slot="implementationCycle" slot-scope="text, record">
          <span :class="{'color-red' : isCodeNode(record)} ">{{ record.implementationCycle }}</span>
        </template>
        <template slot="implementationCycleAudit" slot-scope="text, record">
          <span :class="{'color-red' : isCodeNode(record)} ">{{ record.implementationCycleAudit }}</span>
        </template>
        <template slot="addReportUserName" slot-scope="text, record">
          <span :class="{'color-red' : isCodeNode(record)} ">{{ record.addReportUserName }}</span>
          <!-- v-if="btnShow && (record.parentCode != '-1' || record.addOtherParentNode==1)" -->
          <a-button
            style="border: none; background-color: unset; margin-left: 10px; margin-right: unset"
            icon="search"
            size="small"
            @click="selectReportUser(record)"
            v-if="btnShow"
          />
        </template>
      </a-table>

      <div style="margin-top: 30px" v-show="associatedShowFlag && projectBuildData.projectTypeSubCategory == 'PA'">
        <span>（关联项目的时间节点表）</span>
        <a-table
          :columns="timeColList"
          :data-source="timeListDataByAssociated"
          childrenColumnName="childrens"
          rowKey="timeNodeCode"
          :pagination="false"
          :indentSize="15"
          bordered
          :expandIcon="expandIcon"
          :defaultExpandAllRows="true"
        >
          <template slot="timeNode" slot-scope="text, record">
            <span :class="{'color-red' : isCodeNode(record)} ">{{ record.timeNode }}</span>
          </template>
          <template slot="jobContent" slot-scope="text, record">
            <a-textarea auto-size :value="record.jobContent" readOnly />
          </template>
          <template slot="planStartDate" slot-scope="text, record">
            <span>{{ record.planStartDate }}</span>
          </template>
          <template slot="completionDate" slot-scope="text, record">
            <span>{{ record.completionDate }}</span>
          </template>
          <template slot="planStartDateAudit" slot-scope="text, record">
            <span>{{ record.planStartDateAudit }}</span>
          </template>
          <template slot="completionDateAudit" slot-scope="text, record">
            <span>{{ record.completionDateAudit }}</span>
          </template>
          <template slot="implementationCycle" slot-scope="text, record">
            <span :class="{'color-red' : isCodeNode(record)} ">{{ record.implementationCycle }}</span>
          </template>
          <template slot="implementationCycleAudit" slot-scope="text, record">
            <span :class="{'color-red' : isCodeNode(record)} ">{{ record.implementationCycleAudit }}</span>
          </template>
          <template slot="addReportUserName" slot-scope="text, record">
            <span>{{ record.addReportUserName }}</span>
          </template>
        </a-table>
      </div>
    </div>
    <!--导入子节点-->
    <excel-paste
      :columnsExcel="columnsExcel"
      :exportXlsTemplateUrl="exportXlsTemplateUrl"
      :exportXlsTemplateRequestUrl="exportXlsTemplateRequestUrl"
      :excelVisible="excelVisible"
      :excelConfirmLoading="excelConfirmLoading"
      @handleOkExcel="handleOkExcel"
      @handleCancelExcel="handleCancelExcel"
    ></excel-paste>
    <!--添加节点类型-->
    <a-modal
      title="请选择添加的节点类型"
      :visible="nodeTypeSel.visible"
      @ok="nodeTypeSelOk"
      @cancel="nodeTypeSelCancel"
    >
      <ul class="info-list">
        <li style="margin-bottom: 20px">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">节点类型：</span>
          <a-select
            style="width: 200px"
            v-model="nodeTypeSel.value"
            placeholder="请选择"
            :options="nodeTypeSel.options"
          >
          </a-select>
        </li>
      </ul>
    </a-modal>
    <!--添加子节点-->
    <a-modal
      :title="'添加' + addTimeNodeType + '节点'"
      :visible="showAddTimeNode"
      @ok="doAddSubTimeNode"
      @cancel="cancelAddSubTimeNode"
    >
      <ul class="info-list">
        <li style="margin-bottom: 20px">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">{{ addTimeNodeType }}节点名称：</span>
          <a-input v-model="addSubTimeNodeName" :placeholder="'请输入' + addTimeNodeType + '节点名称'" />
        </li>
      </ul>
    </a-modal>

    <!--选择节点降级、子节点变更所属的父节点-->
    <a-modal
      :title="parentNodeSel.title"
      :visible="parentNodeSel.visible"
      @ok="parentNodeSelOk"
      @cancel="parentNodeSelCancel"
    >
      <ul class="info-list">
        <li style="margin-bottom: 20px">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">请选择{{ parentNodeSel.title }}：</span>
          <a-select
            style="width: 200px"
            v-model="parentNodeSel.value"
            placeholder="请选择"
            :options="parentNodeSel.options"
          >
          </a-select>
        </li>
      </ul>
    </a-modal>
    <person-select ref="personSelect" @setPersonSelResult="setPersonSelResult" :limit="personLimit" />
    <a-modal width="60vw" title="产品平面设计周期表" :visible="designVisible" :footer="null" @cancel="handleCancel">
      <img src="@/assets/designPA.png" alt="" style="width: 100%" />
    </a-modal>
    <a-modal width="80vw" title="时间表填写指引" :visible="ecVisible" :footer="null" @cancel="ecHandleCancel">
      <ec-time-table></ec-time-table>
    </a-modal>
    <a-modal width="720px" title="项目周期规则" :visible="cycleRulesVisible" :footer="null" @cancel="cycleRulesHandleCancel">
      <div>
        <img :src="cycleRulesImgUrl" alt=""/>
      </div>
    </a-modal>

    <a-modal :visible="visibleMaChange" title="温馨提示" @ok="handleMaCancelOk" @cancel="handleMaCancelOk">
      <p style="font-weight:bold">注：如果需要增加相应月份的报工，只需修改项目关键节点为【收益计算周期】的开始时间或者结束时间即可，无需自己增加时间节点！！！</p>
    </a-modal>

  </div>
</template>

<script>
import Vue from 'vue'
import { USER_NAME } from '@/store/mutation-types'
import ExcelPaste from '@/components/excelPaste/ExcelPaste'
import { httpAction, getAction, postAction, postActionAsync,getActionAsync } from '@/api/manage'
import { Modal } from 'ant-design-vue'
export default {
  components: {
    ExcelPaste,
    PersonSelect: () => import('@/components/tools/PersonSelect'),
    EcTimeTable: () => import('@/components/tools/EcTimeTable')
  },
  data() {
    return {
      loading: null,
      currentUserId: Vue.ls.get(USER_NAME),
      loadingDone:false,
      btnShow: false,
      associatedShowFlag: false,
      personLimit: 1,
      projectBuildId: this.$route.query.projectBuildId,
      currentAudit: this.$route.query.currentAudit,
      changeId:this.$route.query.changeId,
      canDoSave: this.$route.query.canDoSave=='true' ? true : false,
      changeTarget: 3,
      projectBuildData: { projectNo: '', projectName: '' },
      projectChangeData: null,
      projectChangeLevel:null,
      url: {
        queryBuildById: '/projectBuild/getNormalVo',
        queryListByBuildId: '/projectBuildTime/queryListByBuildId',
        getMaxAddTimeNodeCode: '/projectBuildTime/getMaxAddTimeNodeCode',
        saveTimeList: '/projectBuildTime/saveTimeList',
        addBatch: '/projectBuildTime/importSubTimeNodeSave',
        buildTimeNodeByAssociated: '/projectBuildTime/getBuildTimeNodeByAssociated',
        queryChangeByBuildId: '/projectChange/queryByBuildId',
        queryChangeById:"/projectChange/queryById",
        queryChangeDetailById: '/projectChange/queryDetailByBuildId',
        queryProjectCycleRules: '/projectCycleRules/list',
      },
      selectedRow: [],
      selectedRowKeys: [],
      selectType: 'checkbox',
      timeColList: [],
      timeList: [
        { title: '项目关键节点', 
          width: '17%', 
          align: 'left', 
          dataIndex: 'timeNode', 
          key: 'timeNode',
          scopedSlots: { customRender: 'timeNode'}
        },
        {
          title: '完成工作内容',
          align: 'left',
          dataIndex: 'jobContent',
          key: 'jobContent',
          scopedSlots: { customRender: 'jobContent' },
        },
        {
          title: '开始时间',
          width: '145px',
          align: 'left',
          dataIndex: 'planStartDate',
          key: 'planStartDate',
          scopedSlots: { customRender: 'planStartDate' },
        },
        {
          title: '计划完成时间',
          width: '145px',
          align: 'left',
          dataIndex: 'completionDate',
          key: 'completionDate',
          scopedSlots: { customRender: 'completionDate' },
        },
        { title: '周期', 
          width: '70px', 
          align: 'left', 
          dataIndex: 'implementationCycle', 
          key: 'implementationCycle',
          scopedSlots: { customRender: 'implementationCycle'}
        },
        {
          title: '报工人',
          width: '120px',
          align: 'left',
          dataIndex: 'addReportUserName',
          key: 'addReportUserName',
          scopedSlots: { customRender: 'addReportUserName' },
        },
      ],
      auditTimeList: [
        { title: '项目关键节点', width: '17%', align: 'left', dataIndex: 'timeNode', key: 'timeNode' },
        {
          title: '完成工作内容',
          align: 'left',
          dataIndex: 'jobContent',
          key: 'jobContent',
          scopedSlots: { customRender: 'jobContent' },
        },
        {
          title: '开始时间',
          width: '145px',
          align: 'left',
          dataIndex: 'planStartDateAudit',
          key: 'planStartDateAudit',
          scopedSlots: { customRender: 'planStartDateAudit' },
        },
        {
          title: '计划完成时间',
          width: '145px',
          align: 'left',
          dataIndex: 'completionDateAudit',
          key: 'completionDateAudit',
          scopedSlots: { customRender: 'completionDateAudit' },
        },
        {
          title: '周期',
          width: '70px',
          align: 'left',
          dataIndex: 'implementationCycleAudit',
          key: 'implementationCycleAudit',
          scopedSlots: { customRender: 'implementationCycleAudit' },
        },
        {
          title: '报工人',
          width: '120px',
          align: 'left',
          dataIndex: 'addReportUserName',
          key: 'addReportUserName',
          scopedSlots: { customRender: 'addReportUserName' },
        },
      ],
      columnsExcel: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          isImportExcelColumns: false,
        },
        {
          title: '子节点名称',
          align: 'center',
          dataIndex: 'timeNode',
        },
        {
          title: '父级节点名称',
          align: 'center',
          dataIndex: 'parentTimeNode',
        },
        {
          title: '主要完成内容',
          align: 'center',
          dataIndex: 'jobContent',
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'planStartDate',
        },
        {
          title: '计划完成时间',
          align: 'center',
          dataIndex: 'completionDate',
        },
        {
          title: '报工人',
          align: 'center',
          dataIndex: 'addReportUserId',
        },
      ],
      showAddTimeNode: false,
      addTimeNodeType: '子',
      excelVisible: false,
      excelConfirmLoading: false,
      excelDataSource: [],
      exportXlsTemplateUrl: 'templates/excel/时间表导入模板.xls',
      exportXlsTemplateRequestUrl: '/common/exportXlsTemplate',
      timeListData: [],
      timeListDataByAssociated: [],
      addSubTimeNodeName: '',
      maxTimeNodeCode: '',
      userSel: {
        tabUrl: '/upms/user/selUserListWithNoLock',
        title: '',
        visible: false,
        confirmLoading: true,
        keyword: '',
        data: [],
        freshKey: 0,
        selectUserData: [],
        currentRecord: null,
      },
      designVisible: false,
      ecVisible: false,
      parentNodeSel: {
        title: '',
        visible: false,
        value: '',
        options: [],
      },
      nodeTypeSel: {
        visible: false,
        value: '',
        options: [
          { label: '父节点', value: '0' },
          { label: '子节点', value: '1' },
        ],
      },
      projectCycleRulesData:[],
      relationDesc:['大于等于','小于等于','小于','大于','等于'],
      relationValue:['>=','<=','<','>','='],
      relationSymbol:['≥','≤','＜','＞','＝'],
      cycleRulesVisible:false,
      cycleRulesColumns: [
        {
          title:'项目类型',
          align:"center",
          dataIndex: 'projectSubTypeName'
        },
        {
          title:'项目等级',
          align:"center",
          dataIndex: 'projectLevel'
        },

        {
          title:'开始时间节点',
          align:"center",
          dataIndex: 'startTimeNodeName'
        },
        {
          title:'目标时间节点',
          align:"center",
          dataIndex: 'endTimeNodeName'
        },
        {
          title:'关系',
          align:"center",
          dataIndex: 'relation'
        },
        {
          title:'时间周期（天）',
          align:"center",
          dataIndex: 'cycleDays'
        },
        {
          title:'条件',
          align:"center",
          dataIndex: 'condition',
        },
        {
          title:'条件说明',
          align:"center",
          dataIndex: 'conditionMemo'
        },
      ],
      cycleRulesImgUrl:'',
      edPlaceholderArr:[
        {
          timeNodeCode: '1',
          msg: '在海芯系统完成立项审批'
        },
        {
          timeNodeCode: '20',
          msg: '针对客户需求等，确认设计是否进行优化，无需改进的，可直接写无。'
        },
        {
          timeNodeCode: '30',
          msg: '根据生产制造需求，安排采购材料。'
        },
        {
          timeNodeCode: '40',
          msg: '机械、电子、软件等完成组装、测试等，达到交付标准。'
        },
        {
          timeNodeCode: '50',
          msg: '仪器设备交付给应用方，按照技术要求进行验收，达成验收标准，可正常使用。'
        },
        {
          timeNodeCode: '60',
          msg: '运行三个月后，将运行问题解决后，进行验收。'
        },
      ],
      visibleMaChange:false
    }
  },
  mounted() {
    this.getProjectBuildData();
    this.btnShow=this.canDoSave;
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  methods: { 
    isCodeNode(record){
      return record!=null && record.parentCode=='-1' && record.addOtherParentNode!=1
    },
    getProjectBuildData: function () {
     // debugger;
      getAction(this.url.queryBuildById, { id: this.projectBuildId }).then(async (res) => {
        this.projectBuildData = res.result || {}
        /*this.btnShow =
          (this.projectBuildData.status === 1 || this.currentAudit === 'true') &&
          (this.projectBuildData.createUserId === this.currentUserId ||
            this.projectBuildData.projectManagers.indexOf(this.currentUserId) >= 0 ||
            this.projectBuildData.assistantProjectManagers.indexOf(this.currentUserId) >= 0);
        if(this.changeId&&
          (this.projectBuildData.createUserId === this.currentUserId ||
            this.projectBuildData.projectManagers.indexOf(this.currentUserId) >= 0 ||
            this.projectBuildData.assistantProjectManagers.indexOf(this.currentUserId) >= 0)||
          (/!*this.projectBuildData.projectClass=='40'&&*!/this.projectBuildData.projectMembers.indexOf(this.currentUserId)>=0)){
          this.btnShow =true;
        }*/
        if (this.projectBuildData.status === 1) {
          this.timeColList = this.timeList
        } else {
          this.timeColList = this.auditTimeList
        }
        if (this.changeId) {
          this.getProjectChangeData();
          await this.getChangeXYGradePoint();
          await this.getChangeCoreGradePoint();
        }
        this.getTimeListData();
        this.getMaxAddTimeNodeCode();

        if (this.projectBuildData.projectClass === '80') {
          this.getBuildTimeNodeByAssociated()
        }
        if(this.projectChangeLevel){
          this.getProjectCycleRules(this.projectChangeLevel.projectLevel);
        }else if (this.projectBuildData.projectLevel && this.projectBuildData.projectLevel !== '') {
          this.getProjectCycleRules(this.projectBuildData.projectLevel);
        }
      })
    },
    getProjectCycleRules(projectLevel) {
      getAction(this.url.queryProjectCycleRules, {projectSubType: this.projectBuildData.projectTypeSubCategory,projectLevel:projectLevel}).then((res) => {
        this.projectCycleRulesData=res.result||[];
        if(this.projectCycleRulesData.length>0){
          this.cycleRulesImgUrl= require('@/assets/projectCycleRules/projectCycleRules'+this.projectBuildData.projectClass+'.png')
        }
      })
    },
    getProjectChangeData() {
      getAction(this.url.queryChangeById, { id: this.changeId }).then((res) => {
        if (res.result) {
          // this.btnShow =
          //   (this.projectBuildData.createUserId === this.currentUserId ||
          //     this.projectBuildData.projectManagers.indexOf(this.currentUserId) >= 0 ||
          //     this.projectBuildData.assistantProjectManagers.indexOf(this.currentUserId) >= 0||
          //     (/*this.projectBuildData.projectClass=='40'&&*/this.projectBuildData.projectMembers.indexOf(this.currentUserId)>=0)) &&
          //   res.result.status === 1
          this.projectChangeData = res.result
        }
      })
    },
    async getChangeXYGradePoint(){
      await getActionAsync(this.url.queryChangeDetailById,{changeId:this.changeId,changeTarget:5}).then(res=>{
        if(res.result){
          this.projectChangeLevel={projectLevel:res.result.projectLevel,updateTime:res.result.updateTime}
        }
      })
    },
    async getChangeCoreGradePoint(){
      await getActionAsync(this.url.queryChangeDetailById,{changeId:this.changeId,changeTarget:6}).then(res=>{
        if(res.result){
          if(this.projectChangeLevel!=null&&this.projectChangeLevel.updateTime<res.result.updateTime){
            this.projectChangeLevel={projectLevel:res.result.projectLevel,updateTime:res.result.updateTime}
          }
        }
      })
    },
    getBuildTimeNodeByAssociated: function () {
      getAction(this.url.buildTimeNodeByAssociated, { id: this.projectBuildId }).then((res) => {
        this.timeListDataByAssociated = res.result || []
        this.associatedShowFlag = this.timeListDataByAssociated.length !== 0
      })
    },
    getTimeListData: function () {
      this.loading = true
      if (this.changeId) {
        getAction(this.url.queryChangeDetailById, {
          changeId: this.changeId,
          changeTarget: this.changeTarget,
        }).then((res) => {
          if (res.result) {
            this.timeListData = res.result
            this.loading = false
            this.loadingDone=true;
          } else {
            this.doGetTimeData()
          }
        })
      } else {
        this.doGetTimeData()
      }
    },
    doGetTimeData() {
      getAction(this.url.queryListByBuildId, { projectBuildId: this.projectBuildId }).then((res) => {
        this.timeListData = res.result || []
        this.loading = false
        if (this.timeListData.length === 0) {
          this.$message.warning('请在字典表维护项目的关键时间节点')
        }
        this.loadingDone=true;
      })
    },
    getMaxAddTimeNodeCode: function () {
      getAction(this.url.getMaxAddTimeNodeCode, { projectBuildId: this.projectBuildId }).then((res) => {
        this.maxTimeNodeCode = res.result || ''
      })
    },
    handelAddSubTimeNode: function () {
      if (this.selectedRow.length !== 1) {
        this.$message.warning('请选择一个标准节点进行添加子节点')
        return
      }
      if (this.selectedRow && this.selectedRow[0].parentCode !== '-1') {
        this.$message.warning('只能对标准节点添加子节点')
        return
      }
      this.addTimeNodeType = '子'
      this.addSubTimeNodeName = ''
      this.showAddTimeNode = true
    },
    //添加父节点
    addRoot() {
      this.addTimeNodeType = '父'
      this.addSubTimeNodeName = ''
      this.showAddTimeNode = true
    },
    handleAddNode() {
      if (this.projectBuildData.projectClass == '60') {
        // 对应MA类型的项目，变更过程中不能手动添加节点，要改计算收益周期的时间
        this.visibleMaChange = true
        return
      }
      this.nodeTypeSel.visible = true
    },
    handleMaCancelOk() {
      this.visibleMaChange = false
    },
    nodeTypeSelOk() {
      this.nodeTypeSel.visible = false
      if (this.nodeTypeSel.value == '0') {
        this.addRoot()
      }
      if (this.nodeTypeSel.value == '1') {
        this.handelAddSubTimeNode()
      }
    },
    nodeTypeSelCancel() {
      this.nodeTypeSel.visible = false
      this.nodeTypeSel.value = ''
    },
    parentNodeSelOk() {
      this.parentNodeSel.visible = false
      if (!this.parentNodeSel.value) {
        this.$message.warning('请选择有效的父节点')
        return
      }
      if (this.parentNodeSel.title == '降级至父节点') {
        var nodeIndex = this.getTimeIndex(this.timeListData, null)
        var node = this.timeListData[nodeIndex]
        this.timeListData.splice(nodeIndex, 1)
        node.parentCode = this.parentNodeSel.value
        var newChildren = node.childrens
        node.childrens = []
        newChildren.push(node)
        this.timeListData.forEach((item) => {
          if (item.timeNodeCode == this.parentNodeSel.value) {
            item.childrens = item.childrens.concat(newChildren)
          }
        })
      }
      this.selectedRow = []
      this.selectedRowKeys = []
    },
    parentNodeSelCancel() {
      this.parentNodeSel.visible = false
    },
    cancelAddSubTimeNode: function () {
      this.addSubTimeNodeName = ''
      this.showAddTimeNode = false
    },
    doAddSubTimeNode: function () {
      if (this.addSubTimeNodeName === '') {
        this.$message.warning('请先输入' + this.addTimeNodeType + '节点名称')
        return
      }
      let checkData = null
      let checkedTimeNode = {}
      if (this.selectedRow != null && this.selectedRow.length > 0) {
        checkedTimeNode = this.timeListData.filter((item) => {
          return item.timeNodeCode === this.selectedRow[0].timeNodeCode
        })
        if (this.addTimeNodeType == '子') {
          checkData = checkedTimeNode[0].childrens.filter((item) => {
            return item.name === this.addSubTimeNodeName
          })
        }
      }
     // debugger
      if (this.addTimeNodeType == '父') {
        checkData = this.timeListData.filter((item) => {
          return item.name === this.addSubTimeNodeName
        })
      }
      if (checkData && checkData.length > 0) {
        this.$message.warning(this.addTimeNodeType + '节点名称重复')
        return
      }
      this.getMaxTimeNode()
      var id = parseInt(String(new Date().getTime()).substring(5))
      console.log('this.maxTimeNodeCode:' + this.maxTimeNodeCode)
      let newNode = {
        id: id,
        projectBuildId: this.projectBuildId,
        timeNodeCode: this.maxTimeNodeCode,
        jobContent: '',
        planStartDate: '',
        implementationCycle: '',
        completionDate: '',
        implementationCycleAudit: '',
        completionDateAudit: '',
        planStartDateAudit: '',
        realCompletionDate: '',
        reportUserId: '',
        reportUserName: '',
        addReportUserId: '',
        addReportUserName: '',
        timeNode: this.addSubTimeNodeName,
        parentCode: this.addTimeNodeType == '子' ? checkedTimeNode[0].timeNodeCode : '-1',
        addOtherParentNode: this.addTimeNodeType == '子' ? 0 : 1,
        childrens: [],
      }
      if (this.addTimeNodeType == '子') {
        checkedTimeNode[0].childrens.push(newNode)
      }
      if (this.addTimeNodeType == '父') {
        var index = -1
        if (this.selectedRow != null && this.selectedRow.length > 0) {
          for (var n = 0; n < this.timeListData.length; n++) {
            if (this.timeListData[n].timeNodeCode == this.selectedRow[0].timeNodeCode) {
              index = n
            }
          }
        }
        if (index == -1) {
          this.timeListData.push(newNode)
        } else {
          this.timeListData.splice(index + 1, 0, newNode)
        }
      }
      this.showAddTimeNode = false
    },
    getMaxTimeNode: function () {
     // debugger
      const that = this
      this.timeListData.forEach(function (parent) {
        if (that.maxTimeNodeCode < parent.timeNodeCode && parent.timeNodeCode.indexOf('add') >= 0) {
          that.maxTimeNodeCode = parent.timeNodeCode
        }
        let children = parent.childrens
        if (children && children.length > 0) {
          let addTimeNode = children.filter((t) => t.timeNodeCode.indexOf('add') >= 0)
          if (addTimeNode && addTimeNode.length > 0) {
            addTimeNode.forEach(function (node) {
              if (node.timeNodeCode > that.maxTimeNodeCode) {
                that.maxTimeNodeCode = node.timeNodeCode
              }
            })
          }
        }
      })
      if (this.maxTimeNodeCode && this.maxTimeNodeCode !== '') {
        let num = parseInt(this.maxTimeNodeCode.substring(3)) + 1
        this.maxTimeNodeCode = 'add' + (Array(3).join('0') + num).slice(-3)
      } else {
        this.maxTimeNodeCode = 'add001'
      }
    },
    timeSelect: function (record) {
      let startDateStr = this.projectBuildData.status === 1 ? record.planStartDate : record.planStartDateAudit
      let endDateStr = this.projectBuildData.status === 1 ? record.completionDate : record.completionDateAudit
      if (startDateStr && startDateStr != '' && endDateStr && endDateStr != '') {
        let startDate = new Date(startDateStr)
        let endDate = new Date(endDateStr)
        if (startDate > endDate) {
          this.$message.warning('开始时间不能大于完成时间')
          return
        }
        if (this.projectBuildData.status === 1) {
          record.implementationCycle = parseInt((
            Math.floor(endDate.getTime() - startDate.getTime()) /
            (24 * 3600 * 1000)
          ).toFixed(0))+1
        } else {
          record.implementationCycleAudit = parseInt((
            Math.floor(endDate.getTime() - startDate.getTime()) /
            (24 * 3600 * 1000)
          ).toFixed(0))+1
        }
      }
    },
    userSelSearch(direction, value) {
      if (direction !== 'left') {
        return
      }
      const that = this
      getAction(this.userSel.tabUrl, { pageSize: 10, keyword: value }).then((res) => {
        if (res.code == 0) {
          that.userSel.data = res.result.records
        } else {
          this.$message.warning('用户选择数据加载失败:' + res.message)
        }
      })
    },
    filterOption(inputValue, option) {
      return option.username.indexOf(inputValue) > -1 || option.realname.indexOf(inputValue) > -1
    },
    renderItem(item) {
      const customLabel = (
        <span class="custom-item">
          {item.username} - {item.realname}
        </span>
      )
      return {
        label: customLabel, // for displayed item
        value: item.username, // for title and filter matching
      }
    },
    selectReportUser: function (record) {
      this.userSel.currentRecord = record
      // this.userSel.selectUserData=[];
      // this.userSel.visible=true;
      this.$refs.personSelect.doSelect()
    },
    setPersonSelResult(result) {
      this.$set(this.userSel.currentRecord,'addReportUserId',result[0].username);
      this.$set(this.userSel.currentRecord,'addReportUserName',result[0].realname);
    },
    handleSelectOk() {
      if (this.userSel.selectUserData.length == 0) {
        this.$message.warning('请先选择报工人员')
        return false
      } else if (this.userSel.selectUserData.length > 1) {
        this.$message.warning('仅可选择一名报工人员')
        return false
      } else {
        let arr = this.userSel.selectUserData[0].split(',')
        this.userSel.currentRecord.addReportUserId = arr[0]
        this.userSel.currentRecord.addReportUserName = arr[1]
      }
      this.userSel.visible = false
    },
    userSelHandleCancel() {
      this.userSel.visible = false
      this.flag = false
    },
    SelectDeptManager(targetKeys, direction, moveKeys) {
      this.userSel.selectUserData = targetKeys
    },
    openImportWin: function () {
      if (this.projectBuildData.projectClass == '60') {
        // 对应MA类型的项目，变更过程中不能手动添加节点，要改计算收益周期的时间
        this.visibleMaChange = true
        return
      }
      this.excelVisible = true
    },
    handleOkExcel: function (data) {
      this.excelDataSource = []
      for (let index = 0; index < data.length; index++) {
        const element = data[index]
        if (
          element.timeNode === '' ||
          element.jobContent === '' ||
          element.planStartDate === '' ||
          element.completionDate === ''
        ) {
          this.$message.warning('节点名称、主要完成内容、开始时间、计划完成时间必填')
          return
        }
        let checkData = data.filter((item) => {
          return item.timeNode === element.timeNode
        })
        if (!!checkData && checkData.length > 1) {
          this.$message.warning(`节点名称：[${element.timeNode}] 重复`)
          return
        }
        if (element.parentTimeNode === '') {
          checkData = this.timeListData.filter((item) => {
            return item.timeNode === element.timeNode && item.parentCode === '-1'
          })
          if (!checkData || checkData.length == 0) {
            this.$message.warning(`父节点：[${element.timeNode}] 不存在`)
            return
          }
          element.timeNodeCode = checkData[0].timeNodeCode
          element.parentCode = '-1'
        } else {
          checkData = this.timeListData.filter((item) => {
            return item.timeNode === element.parentTimeNode
          })
          if (!checkData || checkData.length == 0) {
            this.$message.warning(`父级节点：[${element.parentTimeNode}] 不存在`)
            return
          }
          element.parentCode = checkData[0].timeNodeCode
          checkData = checkData[0].childrens.filter((item) => {
            return item.timeNode === element.timeNode
          })
          if (!!checkData && checkData.length > 0) {
            this.$message.warning(`子节点：[${element.timeNode}] 已存在`)
            return
          }
        }

        let startDate = new Date(element.planStartDate)
        let endDate = new Date(element.completionDate)
        if (startDate > endDate) {
          this.$message.warning(`节点：[${element.timeNode}] 开始时间不能大于结束时间`)
          return
        }
        //日期格式化
        element.planStartDate = this.formatDate(startDate)
        element.completionDate = this.formatDate(endDate)
        element.implementationCycle = (
          Math.floor(endDate.getTime() - startDate.getTime()) /
          (24 * 3600 * 1000)
        ).toFixed(0)
        element.projectBuildId = this.projectBuildId
      }
      this.excelDataSource = data
      //数据验证
      this.excelConfirmLoading = true
      postAction(this.url.addBatch, { importTimeList: data, changeId: this.changeId })
        .then((res) => {
          this.excelConfirmLoading = false
          if (res.code === 200) {
            this.excelVisible = false
            if (res.result && res.result !== '') {
              let checkResult=JSON.parse(res.result);
              this.$info({
                title: '周期超期提醒',
                content:  '按项目周期管理要求，' +checkResult.message ,
                onOk() {},
              });
            }else{
              this.$message.success('导入成功')
            }
            this.getTimeListData()
            this.getMaxAddTimeNodeCode()
          } else {
            this.$message.warning('操作异常:' + res.message)
          }
        })
        .catch((res) => {
          this.excelConfirmLoading = false
          this.$message.warning('操作异常:' + res.message)
        })
    },
    formatDate: function (date) {
      let year = date.getFullYear()
      let month = (Array(2).join('0') + (date.getMonth() + 1)).slice(-2)
      let dateStr = (Array(2).join('0') + date.getDate()).slice(-2)
      return [year, month, dateStr].join('-')
    },
    handleCancelExcel: function () {
      this.excelVisible = false
    },
    deleteSubTimeNode: function () {
      if (this.selectedRow.length === 0) {
        this.$message.warning('请先选择要删除的节点')
        return
      }
     // debugger
      let standardNode = this.selectedRow.filter((n) => n.parentCode == '-1' && n.addOtherParentNode != 1)
      if (standardNode && standardNode.length > 0) {
        this.$message.warning('标准节点不能删除')
        return
      }

      const _this = this
      Modal.confirm({
        title: '确定删除选中的节点？',
        onOk() {
          _this.selectedRow.forEach(function (child) {
            if (child.parentCode == '-1' && child.addOtherParentNode == 1) {
              var pindex = _this.getTimeIndex(_this.timeListData, child)
              _this.timeListData.splice(pindex, 1)
            } else {
              let parentData = _this.timeListData.filter((item) => {
                return item.timeNodeCode === child.parentCode
              })
              let index = 0
              parentData[0].childrens.forEach((item) => {
                if (item.timeNodeCode === child.timeNodeCode) {
                  parentData[0].childrens.splice(index, 1)
                  return
                }
                index++
              })
            }
          })

          _this.selectedRow = []
          _this.$message.success('删除成功，保存生效')
        },
        onCancel() {},
      })
    },

    //上移
    moveUp() {
     // debugger
      if (
        this.selectedRow.length !== 1 ||
        (this.selectedRow[0].addOtherParentNode != 1 && this.selectedRow[0].parentCode == '-1')
      ) {
        this.$message.warning('请选择1个新增的节点进行移动')
        return
      }
      if (this.selectedRow[0].parentCode == '-1') {
        //父节点
        this.move(this.timeListData, 'up')
      } else {
        //子节点
        var parentIndex = this.getParentIndex()
        if (parentIndex == -1) {
          this.$message.warning('无有效父节点')
          return
        }
        this.move(this.timeListData[parentIndex].childrens, 'up')
      }
    },
    //下移
    moveDown() {
      if (
        this.selectedRow.length !== 1 ||
        (this.selectedRow[0].addOtherParentNode != 1 && this.selectedRow[0].parentCode == '-1')
      ) {
        this.$message.warning('请选择1个新增的节点进行移动')
        return
      }
      if (this.selectedRow[0].parentCode == '-1') {
        //父节点
        this.move(this.timeListData, 'down')
      } else {
        //子节点
        var parentIndex = this.getParentIndex()
        if (parentIndex == -1) {
          this.$message.warning('无有效父节点')
          return
        }
        this.move(this.timeListData[parentIndex].childrens, 'down')
      }
    },
    //升级
    upGrade() {
      if (this.selectedRow.length !== 1 || this.selectedRow[0].parentCode == '-1') {
        this.$message.warning('请选择1个子节点进行升级操作')
        return
      }
      //debugger
      var parentNodeChildrens = this.timeListData[this.getParentIndex()].childrens
      var index = this.getTimeIndex(parentNodeChildrens, null)
      var node = parentNodeChildrens[index]
      //移除该子节点
      this.timeListData[this.getParentIndex()].childrens.splice(index, 1)
      //设置该子节点为父节点，并加入
     // debugger
      node.parentCode = '-1'
      node.addOtherParentNode = '1'
      this.timeListData.push(node)
      this.selectedRow = []
      this.selectedRowKeys = []
    },
    //降级
    downGrade() {
      if (
        this.selectedRow.length !== 1 ||
        this.selectedRow[0].parentCode != '-1' ||
        this.selectedRow[0].addOtherParentNode != 1
      ) {
        this.$message.warning('请选择1个新增的父节点进行降级操作')
        return
      }
      this.parentNodeSel.visible = true
      this.parentNodeSel.title = '降级至父节点'
      this.parentNodeSel.options = []
      this.parentNodeSel.value = ''
      this.timeListData.forEach((item) => {
        if (item.id != this.selectedRow[0].id) {
          this.parentNodeSel.options.push({
            value: item.timeNodeCode,
            label: item.timeNode,
          })
        }
      })
    },
    getTimeIndex(list, item) {
      var index = -1
      if (list == null || list.length < 1) {
        return index
      }
      if (!item) {
        item = this.selectedRow[0]
      }
      for (var i = 0; i < list.length; i++) {
        if (item.id == list[i].id) {
          return (index = i)
        }
      }
      return index
    },
    getParentIndex() {
      var parentIndex = -1
      for (var i = 0; i < this.timeListData.length; i++) {
        if (this.timeListData[i].timeNodeCode == this.selectedRow[0].parentCode) {
          parentIndex = i
        }
      }
      return parentIndex
    },
    move(list, type) {
      var index = this.getTimeIndex(list, null)
      if (index == -1) {
        this.$message.warning('选中的元素不存在')
        return
      }
      if (type == 'up' && index == 0) {
        this.$message.warning('同级第一个元素无法操作上移')
        return
      }
      if (type == 'down' && index == list.length - 1) {
        this.$message.warning('同级最后一个元素无法操作下移')
        return
      }
      var node = list[index]
      list.splice(index, 1)
      list.splice(type == 'up' ? index - 1 : index + 1, 0, node)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRows
    },
    async save() {
      let success = 0
      await postActionAsync(this.url.saveTimeList, {
        projectBuildId: this.projectBuildId,
        timeList: this.timeListData,
        changeId: this.changeId,
        overdueProject:this.projectBuildData.overdueProject
      }).then((res) => {
        if (res.success) {
          success = 1
          this.$message.success('保存成功')
          this.getTimeListData()
        } else {
          this.$message.warning(res.message)
        }
      })
      return success
    },
    async doSubmit(submitProject) {
      if (!this.btnShow||!this.loadingDone) {
        return 2
      }
      for (let i = 0; i < this.timeListData.length; i++) {
        let item = this.timeListData[i]
        if (!this.checkTimeNode(item)) {
          return await this.save()
        }

        for (let j = 0; j < item.childrens; j++) {
          let child = item.childrens[j]
          if (!this.checkTimeNode(child)) {
            return await this.save()
          }
        }
      }
      if(this.projectCycleRulesData.length>0){
        return await this.checkProjectCycle(submitProject);
      }
      let success = 0;
      await postActionAsync(this.url.saveTimeList, {
        projectBuildId: this.projectBuildId,
        timeList: this.timeListData,
        changeId: this.changeId,
      })
        .then((res) => {
          if (res.success) {
            this.$message.success('保存成功')
            success = 2
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('保存数据出错：' + res.message)
        })
      return success
    },
    async checkProjectCycle(submitProject){
      const vm=this;
      this.projectBuildData.overdueProject=false;
      if(!submitProject){
        let forceCanNotSubmit=false;
        let content='';
        let checkIndex=0;
        for(let i=0;i<this.projectCycleRulesData.length;i++){
          let cycle=this.projectCycleRulesData[i];
          let checkData=this.timeListData.filter(t=>{
            return t.timeNodeCode.indexOf("add")<0&&
              t.timeNodeCode>=cycle.startTimeNodeCode&&
              t.timeNodeCode<=cycle.endTimeNodeCode&&
              (!cycle.condition||cycle.condition===''||eval(JSON.parse(cycle.condition).jsCondition.replace(/#po#/g,'vm.projectBuildData')))
          });
          if(checkData&&checkData.length>0){
            let cycleDays=0;
            checkData.forEach(d=>{
              cycleDays+=this.projectBuildData.status===1?(d.implementationCycle?parseInt(d.implementationCycle):0):(d.implementationCycleAudit?parseInt(d.implementationCycleAudit):0);
            });
            if(!eval(cycleDays+this.relationValue[this.relationDesc.indexOf(cycle.relation)]+cycle.cycleDays)){
              if(cycle.forceCanNotSubmit){
                forceCanNotSubmit=true;
              }
              let intervalDescription=cycle.intervalDescription?'区间【'+cycle.intervalDescription+'】':'节点【'+cycle.startSimpleName+'】至【'+cycle.endSimpleName+'】';
              content+=(++checkIndex)+'、'+intervalDescription+'周期需'+this.relationSymbol[this.relationDesc.indexOf(cycle.relation)]+cycle.cycleDays+"天，"+(cycle.forceCanNotSubmit?"否则将不允许提交。；":"超期项目会被标识【超期】，且立项必须经过【法人公司总经理】审批。；");
            }
          }
        }
        if(content!==''){
          content=content.substring(0,content.length-1);
          const h = this.$createElement;
          const m = content.split('；');
          let html = [];
          html.push(h('div', "按项目周期管理要求："));
          m.forEach(item =>{
            html.push(h('div', item))
          });
          this.$info({
            title: '周期规则校验结果',
            content: h('div', {}, html),
            onOk() {},
          });
          this.projectBuildData.overdueProject=!forceCanNotSubmit;
        }
      }

      if(await this.save()){
        return 2;
      }else{
        return 0;
      }
    },
    checkTimeNode(item) {
      if (
        this.projectBuildData.status === 1 &&
        (!item.jobContent ||
          item.jobContent.trim() === '' ||
          !item.planStartDate ||
          item.planStartDate === '' ||
          !item.completionDate ||
          item.completionDate === '')
      ) {
        this.$message.warning('节点 [ ' + item.timeNode + ' ] 完成工作内容、开始时间、计划完成时间必填')
        return false
      }
      if (
        this.projectBuildData.status > 1 &&
        (!item.jobContent ||
          item.jobContent.trim() === '' ||
          !item.planStartDateAudit ||
          item.planStartDateAudit === '' ||
          !item.completionDateAudit ||
          item.completionDateAudit === '')
      ) {
        this.$message.warning('节点 [ ' + item.timeNode + ' ] 完成工作内容、开始时间、计划完成时间必填')
        return false
      }
      let startDateStr = this.projectBuildData.status === 1 ? item.planStartDate : item.planStartDateAudit
      let endDateStr = this.projectBuildData.status === 1 ? item.completionDate : item.completionDateAudit
      if (startDateStr && startDateStr != '' && endDateStr && endDateStr != '') {
        let startDate = new Date(startDateStr)
        let endDate = new Date(endDateStr)
        if (startDate > endDate) {
          this.$message.warning('节点 [ ' + item.timeNode + ' ] 开始时间不能大于完成时间')
          return false
        }
      }
      return true
    },
    openPic() {
      this.designVisible = true
    },
    handleCancel() {
      this.designVisible = false
    },
    openEcTable() {
      this.ecVisible = true
    },
    ecHandleCancel() {
      this.ecVisible = false
    },
    cycleRulesHandleCancel() {
      this.cycleRulesVisible = false
    },
    expandIcon(props) {
      if (Array.isArray(props.record.childrens) && props.record.childrens.length != 0) {
        // props.expanded=true;
        console.log(props.expanded, 'expanded')
        if (props.expanded) {
          //有数据-展开时候图标
          return (
            <a
              style="color: 'black',margin-right:0px"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type="minus-square" style="color:#5f5f5f;margin-right:5px" />
            </a>
          )
        } else {
          //有数据-未展开时候图标
          return (
            <a
              style="color: 'black' ,margin-right:0px"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type="plus-square" style="color:#5f5f5f;margin-right:5px" />
            </a>
          )
        }
      } else {
        //无数据-图标
        return <span></span>
      }
    },
    getPlaceholder(record) {
      if (this.projectBuildData.projectTypeSubCategory ==  'ED') {
        const edPla = this.edPlaceholderArr.filter(item => {
          return item.timeNodeCode == record.timeNodeCode
          });
        return edPla.length > 0 ? edPla[0].msg : '请输入工作内容'
      } else {
        return '请输入工作内容'
      }
    }
  },
}
</script>
<style lang="less" scoped>
.color-red {
  color: red !important;
  /deep/ .ant-input{
    color: red !important;
  }
}
/deep/ .ant-btn-primary {
  background: #4095e4;
}
/deep/ td .ant-input {
  border: unset;
}
/deep/ .ant-btn {
  height: 30px;
  border-radius: 2px;
  margin-right: 10px;
}
/deep/ .ant-table-thead > tr > th {
  background: #dadee9 !important;
}
/deep/.ant-table-thead > tr:first-child > th:first-child,
/deep/ .ant-table table {
  border-radius: unset;
  line-height: 1;
}

/deep/.ant-table-thead > tr:first-child > th:first-child,
/deep/ .ant-table table {
  border-radius: unset;
  line-height: 1;
}
/deep/.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.timeTable {
  border: 1px solid #e6e6e6;
  background-color: #fff;
  margin-bottom: 70px;
  .header {
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    padding: 30px 0 0 25px;
  }
  .content {
    padding: 20px 25px;
    .controller {
      // display: flex;
      // justify-content: space-between;
      margin-bottom: 15px;
    }
  }
}
.info-list {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px dashed #ebebeb;
  > li {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    > img {
      margin-right: 5px;
    }
    .list-title {
      width: 150px;
      font-weight: 900;
    }
  }
}
/deep/ .ant-transfer-list .ant-btn-primary {
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected {
  display: none;
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-title {
  color: #fff;
}
/deep/.ant-table-placeholder {
  z-index: unset;
}
</style>